<template>
  <div v-if="showTooltip">
    <n-tooltip :placement="placement" trigger="hover">
      <!-- 具名插槽 -->
      <template #trigger>
        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
          <slot></slot>
        </div>
      </template>
      {{ content }}
    </n-tooltip>
  </div>
  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { type FollowerPlacement } from 'vueuc'

interface Props {
  /** 控制是否显示 tooltip */
  showTooltip?: boolean
  /** tooltip 的显示位置 */
  placement?: FollowerPlacement
  /** tooltip 的内容 */
  content?: string
}

withDefaults(defineProps<Props>(), {
  showTooltip: true,
  placement: 'bottom',
  content: '',
})
</script>

<style scoped></style>
